<!DOCTYPE html>
<html lang="UTF-8" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <!-- jquery -->
        <script src="/js/jquery.min.js" type="text/javascript"></script>
        <!-- bootstrap -->
        <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" type="text/css"/>
        <script src="/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <!-- jquery-validator -->
        <script src="/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
        <script src="/jquery-validation/localization/messages_zh.min.js" type="text/javascript"></script>
        <!-- layer -->
        <script src="/layer/layer.js" type="text/javascript"></script>
        <!-- md5.js -->
        <script src="/js/md5.min.js" type="text/javascript"></script>
        <!-- common.js -->
        <script src="/js/common.js" type="text/javascript"></script>
        <title>商品详情</title>
    </head>
    <body>
        <!-- 引入公共头部 -->
        <div id="header"></div>
        <script>
            $("#header").load("/pages/common/head.htm")
        </script>
        <div class="panel panel-default">
            <div class="panel-heading">秒杀商品详情</div>
            <div class="panel-body">
                <span id="userTip"> 您还没有登录，请登陆后再操作<br/></span>
                <span>默认收货地址：</span><span id="userAddress">没有收货地址的提示。。。</span>
                <span id="userAddressName"></span>
                <span id="userAddressMobile"></span>
                <span id="addressDetail"></span>
            </div>
            <table class="table" id="goodslist">
                <tr>
                    <td>商品名称</td>
                    <td colspan="3" id="goodsName"></td>
                </tr>
                <tr>
                    <td>商品图片</td>
                    <td colspan="3"><img id="goodsImage" width="200" height="200"/></td>
                </tr>
                <tr>
                    <td>秒杀开始时间</td>
                    <td id="startTime"></td>
                    <td>
                        <input type="hidden" id="remainSeconds"/>
                        <span id="miaoshaTip"></span>
                    </td>
                    <td>
                        <!--<form id="miaoshaForm" method="post" action="/miaosha/do/miaosha">
                            <button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
                            &lt;!&ndash; 隐藏的请求参数 &ndash;&gt;
                            <input type="hidden" name="goodsId" id="goodsId"/>
                        </form>-->
                        <button class="btn btn-primary btn-block" type="submit" id="buyButton" onclick="doMiaosha()">立即秒杀</button>
                        <!-- 隐藏的请求参数 -->
                        <input type="hidden" name="goodsId" id="goodsId"/>
                    </td>
                </tr>
                <tr>
                    <td>商品原价</td>
                    <td colspan="3" id="goodsPrice"></td>
                </tr>
                <tr>
                    <td>秒杀价</td>
                    <td colspan="3" id="miaoshaPrice"></td>
                </tr>
                <tr>
                    <td>库存数量</td>
                    <td colspan="3" id="stockCount"></td>
                </tr>
            </table>
        </div>
    </body>
    <script>

        $(function () {
            // countDown();
            getDetails();
        });

        // 发送 ajax 请求 获取数据
        function getDetails() {
            var goodsId = g_getQueryString("goodsId")
            $.ajax({
                url: "/goods/to/goods/detail/" + goodsId,
                type: "GET",
                success: function (response) {
                    // 响应码是 200000 表示请求成功
                    if (response.code == 200000) {
                        render(response.data.goodsDetailsVo);
                    } else {
                        layer.msg(response.msg);
                    }
                },
                error: function () {
                    layer.msg("客户端请求有误");
                }
            });
        }

        // 渲染页面数据
        function render(detail) {
            var goods = detail.goods;
            var user = detail.user;
            var userAddress = detail.userAddress;
            var miaoshaStatus = detail.miaoshaStatus;
            var remainSeconds = detail.remainSeconds;

            if (!user) {
                $("#userIsNull").show();
                $("#userIsNotNull").hide();
                $("#userTip").show();
                $("#userAddress").hide();
                $("#userAddressName").hide();
                $("#userAddressMobile").hide();
                $("#addressDetail").hide();
            }
            if (!userAddress) {
                $("#userTip").hide();
                $("#userAddress").show();
                $("#userAddressName").hide();
                $("#userAddressMobile").hide();
                $("#addressDetail").hide();
            }

            $("#userIsNull").hide();
            $("#userIsNotNull").show();
            $("#userNickname").text(user.nickname);
            $("#userPhone").text(user.id);


            $("#userTip").hide();
            $("#userAddress").hide();
            $("#userAddressName").text(userAddress.name);
            $("#userAddressMobile").text(userAddress.userId);
            $("#addressDetail").text(userAddress.addressDetail);

            $("#goodsName").text(goods.goodsName);
            $("#goodsImage").attr("src", goods.goodsImage);
            var oldTime = new Date(goods.startDate).getTime()
            $("#startTime").text((new Date(oldTime).format("yyyy-MM-dd hh:mm:ss")));
            $("#remainSeconds").val(remainSeconds);
            $("#goodsId").val(goods.id);
            $("#goodsPrice").text(goods.goodsPrice);
            $("#miaoshaPrice").text(goods.miaoshaPrice);
            $("#stockCount").text(goods.stockCount);
            countDown();
        }

        // 倒计时
        function countDown() {
            var remainSeconds = $("#remainSeconds").val();
            var timeOut;
            // 秒杀还没开始，倒计时
            if (remainSeconds > 0) {
                $("#buyButton").attr("disabled", true);
                $("#miaoshaTip").html("秒杀倒计时：" + remainSeconds + " 秒")
                // 计时器每隔一秒执行一次。
                timeOut = setTimeout(function () {
                    $("#countDown").text(remainSeconds - 1);
                    $("#remainSeconds").val(remainSeconds - 1);
                    countDown();
                }, 1000);
            }
            // 秒杀正在进行中
            else if (remainSeconds == 0) {
                $("#buyButton").attr("disabled", false);
                // 去掉倒计时
                if (timeOut) {
                    clearTimeout(timeOut);
                }
                $("#miaoshaTip").html("秒杀进行中")
            }
            // 秒杀已经结束
            else {
                $("#buyButton").attr("disabled", true);
                $("#miaoshaTip").html("秒杀已经结束")
            }
        }

        function doMiaosha() {
            $.ajax({
                url: "/miaosha/execute/miaosha",
                type: "POST",
                data: {
                    goodsId: $("#goodsId").val()
                },
                success: function (response) {
                    // 响应码是 200000 表示请求成功
                    if (response.code == 200000) {
                        var orderId = response.data.orderId
                        layer.msg("秒杀成功");
                        window.location.href = "/pages/order_detail.htm?orderId=" + orderId;
                    } else {
                        layer.msg(response.msg);
                    }
                },
                error: function () {
                    layer.msg("秒杀失败");
                }

            });
        }
    </script>
</html>
